import React, { Component, useEffect, createRef } from 'react'
import { Form, Input, Button } from 'antd'
const FormItem = Form.Item
const nameRules = { required: true, message: "请输入姓名！" };
const passworRules = { required: true, message: "请输入密码！" };

export default () => {
    const [form] = Form.useForm()
    console.log(`form`, form)
    const onFinish = val => {
        console.log("onFinish", val); //sy-log
    };
    const onFinishFailed = val => {
        console.log("onFinishFailed", val); //sy-log
    };
    const onReset = () => {
        form.resetFields();
    };
    const onFill = () => {
        form.setFieldsValue({
            name: 'Hello world!',
            password: 'male',
        });
    }
    useEffect(() => {
        form.setFieldsValue({ name: "default" });
        document.getElementById('unDebounce').addEventListener('keyup', function (e) {
            ajax(e.target.value)
        })
        document.getElementById('debounce').addEventListener('keyup', function (e) {
            debounceAjax(e.target.value)
        })
    }, []);
    return (
        <Form
            form={form}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            onReset={onReset}>
            <FormItem label="姓名" name="name" rules={[nameRules]}>
                <Input placeholder="name input placeholder" />
            </FormItem>
            <FormItem label="密码" name="password" rules={[passworRules]}>
                <Input placeholder="password input placeholder" />
            </FormItem>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    Reset
                </Button>
                <Button type="link" htmlType="button" onClick={onFill}>
                    Fill form
                </Button>
            </Form.Item>
            没有防抖的input:<Input id="unDebounce" />
            防抖的input:<Input id="debounce" />
        </Form>
    )
}
const tailLayout = {
    wrapperCol: { offset: 0, span: 8 },
};
function ajax(content) {
    console.log('ajax request ' + content)
}
function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
const debounceAjax = debounce(ajax, 500)
// export default class AntdFormPage extends Component {
//     formRef = createRef()
//     componentDidMount() {
//         console.log(`formRef`, this.formRef.current)
//         this.formRef.current.setFieldsValue({ name: "default" });
//         document.getElementById('unDebounce').addEventListener('keyup', function (e) {
//             ajax(e.target.value)
//         })
//         document.getElementById('debounce').addEventListener('keyup', function (e) {
//             debounceAjax(e.target.value)
//         })
//     }
//     onFinish = val => {
//         console.log(`onFinish`, val)
//     }
//     onFinishFailed = val => {
//         console.log("onFinishFailed", val)
//     }
//     onReset = () => {
//         this.formRef.current.resetFields();
//     }
//     onFill = () => {
//         this.formRef.current.setFieldsValue({
//             name: 'Hello world!',
//             password: 'male',
//         });
//     }
//     render() {
//         console.log("AntdFormPage render", this.formRef.current); //zq-log
//         return (
//             <div>
//                 <h3>AntdFormPage</h3>
//                 <Form
//                     ref={this.formRef}
//                     onFinish={this.onFinish}
//                     onFinishFailed={this.onFinishFailed}
//                     onReset={this.onReset}
//                 >
//                     <FormItem label="姓名" name="name" rules={[nameRules]}>
//                         <Input placeholder="name input placeholder" />
//                     </FormItem>
//                     <FormItem label="密码" name="password" rules={[passworRules]}>
//                         <Input placeholder="password input placeholder" />
//                     </FormItem>
//                     <Form.Item {...tailLayout}>
//                         <Button type="primary" htmlType="submit">
//                             Submit
//                         </Button>
//                         <Button htmlType="button" onClick={this.onReset}>
//                             Reset
//                         </Button>
//                         <Button type="link" htmlType="button" onClick={this.onFill}>
//                             Fill form
//                         </Button>
//                     </Form.Item>
//                 </Form>
//                 没有防抖的input:<Input id="unDebounce" />
//                 防抖的input:<Input id="debounce" />
//             </div>
//         )
//     }
// }
